<template>
  <div class="example-container">
    <h2>图片/颜色选择器组件使用示例</h2>
    
    <!-- 使用封装好的组件 -->
    <PickerModel
      :mode.sync="pickerMode"
      :photoList.sync="photoList"
      :color.sync="selectedColor"
      :tipText="tipText"
      :imgLimit="2"
      :isDisabled="false"
    />
    
    <!-- 显示当前状态 -->
    <div class="status-display">
      <h3>当前状态：</h3>
      <p><strong>模式：</strong>{{ pickerMode === 1 ? '图片模式' : '颜色模式' }}</p>
      <p><strong>图片数量：</strong>{{ photoList.length }}</p>
      <p><strong>选中颜色：</strong>{{ selectedColor }}</p>
      
      <div v-if="photoList.length > 0" class="photo-preview">
        <h4>图片预览：</h4>
        <div class="photo-grid">
          <div v-for="(photo, index) in photoList" :key="index" class="photo-item">
            <img :src="photo.url" :alt="photo.name" />
            <p>{{ photo.name }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PickerModel from './index.vue'

export default {
  name: 'PickerModelExample',
  components: {
    PickerModel
  },
  data() {
    return {
      pickerMode: 1, // 1: 图片模式, 2: 颜色模式
      photoList: [],
      selectedColor: '#409EFF',
      tipText: '（第一张图片默认作为移动端首页图，及海报分享封面图，宽高比例 3:4）'
    }
  },
  watch: {
    pickerMode(newMode) {
      console.log('模式切换:', newMode)
    },
    photoList(newList) {
      console.log('图片列表更新:', newList)
    },
    selectedColor(newColor) {
      console.log('颜色更新:', newColor)
    }
  }
}
</script>

<style lang="scss" scoped>
.example-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  
  h2 {
    color: #333;
    margin-bottom: 20px;
  }
  
  .status-display {
    margin-top: 30px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
    
    h3 {
      color: #333;
      margin-bottom: 15px;
    }
    
    p {
      margin: 8px 0;
      color: #666;
    }
    
    .photo-preview {
      margin-top: 20px;
      
      h4 {
        color: #333;
        margin-bottom: 10px;
      }
      
      .photo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
        
        .photo-item {
          text-align: center;
          
          img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #ddd;
          }
          
          p {
            margin-top: 5px;
            font-size: 12px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style> 